<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="points-rules-main">
                <el-form ref="formRef" :model="form" :rules="rules" class="content">
                    <div class="title">积分获取规则</div>
                    <el-form-item prop="orderOpen">
                        <el-checkbox v-model="form.orderOpen" :true-label="1" :false-label="2"
                            >按照订单实际金额，赠送积分</el-checkbox
                        >
                        <div v-if="form.orderOpen == 1" style="width: 100%; margin: 20px 0">
                            每单购买金额满
                            <el-input-number
                                v-model="form.perGroupAmount"
                                class="custom-number-small"
                                :min="0"
                                :max="9999999"
                                :precision="0"
                                :controls="false" />元，赠送<el-input-number
                                v-model="form.producerPoints"
                                class="custom-number-small"
                                :min="0"
                                :max="9999999"
                                :precision="0"
                                :controls="false" />
                            积分
                        </div>
                    </el-form-item>
                    <!-- <SpecialDialog v-if="(form.orderOpen == 1)"></SpecialDialog> -->
                    <!-- <div class="title">积分消耗规则</div>
            <el-form-item>
              1元 = <el-input-number
                v-model="form.points"
                class="custom-number-small"
                :min="0"
                :max="9999999"
                :precision="0"
                :controls="false" />积分
            </el-form-item> -->
                </el-form>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button type="primary" @click="saveHandler()">保存</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import SpecialDialog from './components/specialDialog.vue';
import { getPointsRuleInfo, setPointsRuleInfo } from '@/api/member/pointsManage/index';

const formRef = ref<any>(null);

const form = reactive<any>({
    status: null,
    orderOpen: 2,
    points: 100,
    perGroupAmount: null,
    producerPoints: null
});

const checkOrderOpen = (rule: any, val: any, callback: any) => {
    if (val && (form.perGroupAmount === null || form.producerPoints === null)) {
        return callback('输入框在选中状态下，必填');
    }
    callback();
};

const rules = reactive({
    activityName: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { max: 20, message: '最长不超过20个字', trigger: 'blur' }
    ],
    orderOpen: [{ required: true, trigger: 'blur', validator: checkOrderOpen }]
});

const saveHandler = async () => {
    formRef.value.validate(async (res: any) => {
        if (res) {
            const params = {
                POINTS_GAIN_RULE: {
                    switch: form.orderOpen,
                    amount: form.perGroupAmount,
                    points: form.producerPoints
                }
                // POINTS_DRAIN_RULE: {
                //   amount: 1,
                //   points: form.points
                // },
            };
            await setPointsRuleInfo(params);
            ElMessage.success('积分规则保存成功');
        }
    });
};

const initData = async () => {
    const params = {
        code: ['POINTS_GAIN_RULE', 'POINTS_DRAIN_RULE', 'POINTS_MERGE_RULE']
    };
    const res = await getPointsRuleInfo(params);
    form.orderOpen = res.POINTS_GAIN_RULE.switch;
    form.perGroupAmount = res.POINTS_GAIN_RULE.amount;
    form.producerPoints = res.POINTS_GAIN_RULE.points;
    // form.points = res.POINTS_DRAIN_RULE.points
};

onMounted(() => {
    initData();
});
</script>
<style lang="scss" scoped>
.points-rules-main {
    padding: 24px;

    .title {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
        position: relative;
        padding-left: 15px;
        margin-bottom: 25px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 16px;
            background-color: var(--el-color-primary);
        }
    }

    .custom-number-small {
        width: 80px;
        margin: 0 4px;
    }

    .footer {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
